<!--发表博客-->
<template>
  <div class="publishblog container">
    <div style="margin-top: 1rem" v-if="!isMobile"></div>
    <div class="publishblog-frame">
      <p class="publishblog-title">Publish Blog</p>
      <div class="panel">
        <div class="label-frame">
          <span class="tips">* </span>
          <span class="label">Topic</span>
        </div>
        <div class="fast">
          <el-select
            v-model="form.column_id"
            clearable
            placeholder="Please Select"
            @change="columChange"
          >
            <el-option
              v-for="item in articleColum"
              :key="item.id + 'colum'"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="panel">
        <div class="label-frame">
          <span class="tips">* </span>
          <span class="label">Categories</span>
        </div>
        <div class="fast">
          <el-cascader
            :options="menuList"
            v-model="form.category_id"
            clearable
            placeholder="Please Select"
            :props="{ label: 'title', value: 'id' }"
          ></el-cascader>
        </div>
      </div>
      <div class="panel">
        <div class="label-frame">
          <span class="tips">* </span>
          <span class="label">Cover</span>
        </div>
        <div class="fast">
          <van-uploader
            v-model="uploadList"
            max-count="1"
            preview-size="6rem"
            :after-read="afterAvatarUpload"
            upload-icon="plus"
            :preview-options="{ closeable: true }"
            @delete="deleteImg"
          />
        </div>
      </div>
      <div class="panel">
        <div class="label-frame">
          <span class="tips">* </span>
          <span class="label">Title</span>
        </div>
        <div class="fast">
          <input placeholder="Blog Title" v-model="form.title" />
        </div>
      </div>
      <div class="panel">
        <div class="label-frame">
          <span class="tips">* </span>
          <span class="label">Abstract</span>
        </div>
        <div class="fast">
          <textarea
            v-model="form.description"
            placeholder="The Blog In This Pager"
          />
        </div>
      </div>
      <div class="panel" style="padding: 0 0">
        <div class="label-frame">
          <span class="tips">* </span>
          <span class="label">Content</span>
        </div>
        <div class="editor-fast" style="width: 100%; z-index: 0">
          <FroalaEditor @change="editorChange" />
        </div>
        <p class="blog-tips">
          Tip: the link in the article can only be put in the site, including
          external links will not be saved;After passing the audit, you will get
          15 experience points and 1.5 points(Once a day)
        </p>
      </div>
      <div class="panel">
        <div class="fast" style="margin-left: 0">
          <div class="tag-frame" v-if="form.tags.length > 0">
            <div
              class="tag-panel"
              v-for="(item, index) in form.tags"
              :key="'tag' + index"
              @click="handleClose(item)"
            >
              <span>{{ item }} </span>
              <van-icon name="cross" size="0.6rem" />
            </div>
          </div>
          <div class="tag-frame">
            <div class="tag-panel" v-if="inputVisible">
              <input
                ref="saveTagInput"
                v-model="inputValue"
                @keyup.enter="handleInputConfirm"
                @blur="handleInputConfirm"
              />
            </div>
            <div class="tag-panel" @click="showInput">
              <span>+ New Tag</span>
            </div>
          </div>
        </div>
      </div>
      <div class="panel submit-frame">
        <div class="btn-frame">
          <div class="btn-panel" @click="clickPreview">Preview</div>
        </div>
        <div class="btn-frame">
          <div class="btn-panel" @click="clickSubmit">Submit</div>
        </div>
      </div>
    </div>
    <van-overlay z-index="10000" :show="show" @click="show = false">
      <div class="blog-frame container" @click.stop>
        <div class="title-frame">
          <div class="title-top">
            <h1 class="blog-title">
              {{ form.title }}
            </h1>
            <div class="blog-tag">
              <span class="tag-frame">{{ colum_name }} </span>
            </div>
          </div>
          <div class="title-bottom">
            <div class="auth-frame">
              <img
                class="auth-icon"
                src="@/assets/imgs/nameImg.png"
                alt="作者"
              />
              <div class="auth-panel">
                <span class="auth-span">{{ form.author }}</span>
                <span class="auth-span">{{ form.release_time }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="blog-panel">
          <div v-html="form.content"></div>
        </div>
        <div class="thumbs-frame">
          <div class="tag-frame">
            <div class="tag">
              <div class="label-frame">
                <img src="@/assets/imgs/label.png" />
                <span>LABEL</span>
              </div>
              <span
                class="tag-panel"
                v-for="(list, tag) in form.tags"
                :key="tag"
              >
                {{ list }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import FroalaEditor from "@/components/FroalaEditor";
import request from "@/services/request";
import tool from "@/common/tool";
export default {
  components: {
    FroalaEditor,
  },
  data() {
    return {
      tool,
      articleColum: [], //文章栏目
      uploadList: [],
      colum_name: "", //选中的文章栏目
      menu_name: "", //选中的分类栏目
      form: {
        //文章提交
        column_id: "",
        category_id: "",
        title: "",
        photo_list: [],
        author: "",
        seo_keyword: "missyeah user blog",
        description: "",
        content: "",
        tags: [],
        release_time: tool.getLocalTimeryymmhh(),
        sort: 999,
      },
      inputVisible: false,
      inputValue: "",
      show: false,
      urlList: [], //外部超链接列表
    };
  },
  computed: {
    menuList() {
      return this.$store.state.menu.menuList;
    },
  },
  mounted() {
    if (this.isMobile) {
      this.$toast("Please submit blog on PC");
      this.$router.back();
    } else {
      this.articelColum();
      this.getUserInfo();
    }
  },
  methods: {
    //获取用户信息
    getUserInfo() {
      this.tips.startLoadingToast();
      this.$store.dispatch("user/userInfo", {}).then((res) => {
        this.tips.closeToast();
        if (res.code == 0 && res.data != undefined) {
          if (res.data) {
            this.form.author = res.data.nick_name;
          }
        }
      });
    },
    //文章提交
    async clickSubmit() {
      if (this.form.column_id == "") {
        this.$toast("Please select a topic");
      } else if (this.form.photo_list.length == 0) {
        this.$toast("Please upload the cover");
      } else if (this.form.title == "") {
        this.$toast("Please fill in the title");
      } else if (this.form.description == "") {
        this.$toast("Please fill in the abstract");
      } else if (this.form.content == "") {
        this.$toast("Please fill in the content");
      } else if (this.urlList.length > 0) {
        this.$toast("Please replace the external link first");
      } else {
        let form = {};
        for (let key in this.form) {
          form[key] = this.form[key];
        }
        form.column_id = [form.column_id];
        this.tips.startLoadingToast();
        let res = await this.$store.dispatch("blog/submitBlog", form);
        this.tips.closeToast();
        if (res.code == 0) {
          this.$toast("Submit successfully and show after approval");
          this.initiali();
          this.$router.back();
        } else {
          this.$toast.fail(res.msg);
        }
      }
    },
    //初始化form
    initiali() {
      this.form.column_id = "";
      this.form.category_id = "";
      this.form.column_id = "";
      this.form.category_id = "";
      this.form.title = "";
      this.form.photo_list = [];
      this.form.author = "";
      this.form.seo_keyword = "missyeah user blog";
      this.form.description = "";
      this.form.content = "";
      this.form.tags = [];
      this.uploadList=[];
    },
    //选中文章栏目
    columChange(val) {
      this.articleColum.forEach((item) => {
        if (val == item.id) {
          this.colum_name = item.name;
        }
      });
    },
    //预览
    clickPreview() {
      console.log(this.form);
      this.show = true;
    },
    //选中标签
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        if (this.form.tags.indexOf(inputValue) == -1) {
          this.form.tags.push(inputValue);
        }
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    //
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.focus();
      });
    },
    //删除标签
    handleClose(tag) {
      this.form.tags.splice(this.form.tags.indexOf(tag), 1);
    },
    //获取文章栏目
    async articelColum() {
      let res = await this.$store.dispatch("blog/blogTree", {
        page: 1,
        page_size: 100,
        parent_id: 1,
      });
      if (res.code == 0 && res.data) {
        this.articleColum = res.data.list;
      }
    },
    //返回编辑器内容
    editorChange(val) {
      //去除编辑器捆绑内容
      let content = tool.clearEditInfo(val);
      //记录外链
      let urlList = [];
      let result = content.match(/(https|http):\/\/[^"'\\]+/gm);
      //console.log(result);
      if (result) {
        for (let i = 0; i < result.length; i++) {
          if (result[i].indexOf(location.origin) == -1) {
            urlList.push(result[i]);
          }
        }
      }
      this.urlList = urlList;
      if (urlList.length != 0) {
        this.$toast(
          "Please check the external link, otherwise it cannot be submitted;" +
            urlList
        );
      }
      this.form.content = content;
    },
    //上传图片
    afterAvatarUpload(upload) {
      const isJPG = upload.file.type === "image/jpeg";
      const isPNG = upload.file.type === "image/png";
      const isLt2M = upload.file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$toast.fail("Only support JPEG / PNG format pictures!");
      } else if (!isLt2M) {
        this.$toast.fail("Picture size can not exceed 2m!");
      }
      //确定上传
      else {
        let that = this;
        var data = new FormData();
        data.append("file", upload.file);
        data.append("object_type", 30);
        upload.status = "uploading";
        request({
          method: "post",
          url: "/api/home/upload/img",
          config: {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          },
          data: data,
        }).then(function (res) {
          upload.status = "done";
          if (res.data.code == 0 && res.data.data != undefined) {
            that.form.photo_list.push(res.data.data);
          }
        });
      }
      return false; //禁用组件的默认上传
    },
    //删除封面
    deleteImg(val) {
      this.form.photo_list = [];
    },
  },
};
</script>
<style lang="less" scoped>
.toast {
  z-index: 10000000000000000;
}
.publishblog {
  width: 100%;
  clear: both;
  margin-bottom: 2rem;
  .publishblog-frame {
    width: 100%;
    clear: both;
    background: #fff;
    padding: 0 0.5rem;
    padding-top: 0.5rem;
    margin-top: 10px;
    padding-bottom: 2rem;
    border-radius: 0.25rem;

    .publishblog-title {
      text-align: center;
      font-size: 1rem;
      line-height: 1.4rem;
      font-family: "BTBlack";
    }

    .panel {
      width: 100%;
      clear: both;
      padding: 0.5rem 0;
      display: flex;
      flex-wrap: wrap;
      font-family: "Helvetica";

      /deep/ .el-input .el-input__inner {
        height: 1.6rem;
        display: flex;
        align-items: center !important;
        align-content: center !important;
        line-height: 1.6rem !important;
        border-radius: 0 !important;
        padding-left: 10px !important;
        font-family: "Helvetica" !important;
      }

      /deep/ .el-input .el-input__inner::placeholder {
        font-size: 0.6rem;
        color: #969799;
      }

      /deep/.el-input__icon {
        line-height: 1.4rem !important;
      }

      /deep/ .el-textarea__inner {
        line-height: 0.8rem !important;
        padding-left: 10px !important;
        height: 5rem;
        border-radius: 0 !important;
        resize: none;
      }

      /deep/ .el-textarea__inner::placeholder {
        font-size: 0.6rem;
        color: #969799;
      }

      .label-frame {
        width: 5.6rem;
        height: 1.6rem;
        clear: both;
        padding: 10px;
        border: 1px solid #dcdfe6;
        font-size: 0.6rem;
        line-height: 0.6rem;
        font-family: "Helvetica";
        display: flex;
        align-items: center;
        display: flex;

        .tips {
          color: red;
          margin-top: 5px;
          margin-right: 5px;
          font-size: 0.6rem;
        }
      }

      .fast {
        flex: 1;
        margin-left: 1rem;
        font-family: "Helvetica" !important;
        input{
            font-family: "Helvetica" !important;
        }
        /deep/.van-uploader__upload-icon {
          font-size: 2rem !important;
        }

        input {
          width: 100%;
          height: 1.6rem;
          padding: 0 10px;
          font-size: 0.6rem;
          border: 1px solid #dcdfe6;
        }

        input::placeholder,
        textarea::placeholder {
          font-size: 0.6rem !important;
          color: #9d9fa3;
        }

        textarea {
          width: 100%;
          padding: 5px;
          min-height: 5rem;
          clear: both;
          font-size: 0.6rem;
          line-height: 0.7rem;
          padding: 10px;
          border: 1px solid #dcdfe6;
        }

        textarea {
          width: 100%;
          padding: 5px;
          min-height: 5rem;
          clear: both;
          font-size: 0.6rem;
          line-height: 0.7rem;
          padding: 10px;
          border: 1px solid #dcdfe6;
        }

        /deep/ .el-input .el-input__inner {
          height: 1.4rem !important;
          line-height: 1.4rem !important;
        }

        .tag-frame {
          clear: both;
          display: inline-flex;
          flex-wrap: wrap;
          align-items: center;
          align-content: center;

          .button-new-tag {
            height: 32px !important;
          }

          .input-new-tag {
            height: 32px !important;
            width: 90px;
          }

          .tag-panel {
            clear: both;
            display: inline-flex;
            cursor: pointer;
            display: flex;
            align-items: center;
            padding: 5px 10px 7px 10px;
            border: 1px solid #dcdcdc;
            border-radius: 3px;
            margin-right: 10px;
            margin-top: 10px;

            input {
              border: 0;
              width: 90px;
              padding-left: 0;
              height: 0.7rem;
            }

            span {
              font-size: 0.6rem;
              line-height: 0.7rem;
              font-family: "Helvetica";
              color: #676767;
            }

            .van-icon {
              margin-left: 5px;
              margin-top: 2px;
            }
          }
        }
      }

      .editor-fast {
        width: 100%;
        clear: both;
        margin-top: 0.5rem;

        /deep/ .froala-body {
          border: 0px !important;
        }
      }
    }

    .submit-frame {
      margin-top: 2rem;
      display: flex;
      justify-content: center;

      .btn-frame {
        width: 5rem;
        height: 2rem;
        padding: 0 0.5rem;

        .btn-panel {
          width: 4rem;
          clear: both;
          padding: 0.6rem 0;
          background: #E38CFF;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.7rem;
          line-height: 0.4rem;
          font-family: "Helvetica";
          cursor: pointer;
        }
      }
    }
  }
  .blog-frame {
    height: 90vh;
    overflow-y: auto;
    clear: both;
    margin-top: 20px;
    background: #fff;
    border-radius: 0.25rem;
    padding: 20px !important;
    .title-frame {
      width: 94%;
      clear: both;
      margin-top: 10px;
      .title-top {
        width: 100%;
        min-height: 30px;
        clear: both;
        display: flex;
        border: rgba(255, 245, 0, 1);

        .blog-title {
          width: 65%;
          flex: 1;
          font-weight: bold;
          line-height: 24px;
          word-break: break-all;
        }

        .blog-tag {
          display: flex;
          align-items: center;
          padding-left: 20px;
          padding-right: 20px;

          .tag-frame {
            padding-right: 10px;
            font-size: 14px;
          }
        }
      }

      .title-bottom {
        width: 100%;
        height: 50px;
        margin-top: 1rem;
        .auth-frame {
          width: 200px;
          height: 100%;
          margin-left: 20px;
          display: flex;

          .auth-icon {
            width: 50px;
            height: 50px;
          }

          .auth-panel {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            align-content: flex-end;
            margin-left: 10px;
            font-size: 18px;

            .auth-span {
              width: 100%;
              height: 20px;
            }
          }
        }
      }
    }

    .blog-panel {
      width: 94%;
      min-height: 100px;
      clear: both;
      margin-top: 1rem;
      font-size: 16px;
      line-height: 20px;
      position: relative;
      .editor-modal {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 20px;
        background: #fff;
      }
    }

    .thumbs-frame {
      width: 100%;
      height: 200px;
      // border: 1px solid #000;
      display: flex;
      flex-wrap: wrap;

      .tag-frame {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;

        .tag {
          display: flex;
          align-items: center;
          flex: 1;
        }

        .read-frame {
          width: 100px;
          height: 100%;
          display: flex;
          align-items: center;
        }

        .label-frame {
          width: 100px;
          height: 40px;
          background-color: rgba(255, 245, 0, 1);
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          line-height: 40px;

          span {
            margin-left: 5px;
            font-weight: bold;
          }
        }

        .tag-panel {
          background: #dcdcdc;
          font-size: 14px;
          margin-left: 15px;
          border-radius: 2px;
          padding: 5px 10px 5px 10px;
        }
      }

      .thumbs-panel {
        width: 100%;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;

        .thumbs-fast {
          width: 200px;
          height: 60px;

          .thumbs-icon {
            width: 60px;
            height: 60px;
            cursor: pointer;
          }

          .thumbs-span {
            font-size: 20px;
            margin-left: 10px;
            line-height: 60px;
          }
        }
      }
    }
  }
  .blog-tips {
    font-size: 14px;
    margin-top: 5px;
    color: #969799;
  }
}
</style>